<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

    <title>账户明细</title>

    <link href="../AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css">
    <link href="../AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css">

    <link href="../css/personal.css" rel="stylesheet" type="text/css">
    <link href="../css/wallet.css" rel="stylesheet" type="text/css">

    <script src="../AmazeUI-2.4.2/assets/js/jquery.min.js" type="text/javascript"></script>
    <script src="../AmazeUI-2.4.2/assets/js/amazeui.js" type="text/javascript"></script>

    <!--引入Layui-->
    <script type="text/javascript" src="../layui/layui.js"></script>
    <link href="../layui/css/layui.css" rel="stylesheet" type="text/css">
    <!--引入Vue-->
    <script type="text/javascript" src="../basic/js/vue.js"></script>
    <!--引入VueAjax-->
    <script type="text/javascript" src="../basic/js/axios.min.js"></script>
    <!--引入自己的js-->
    <script type="text/javascript" src="../js/myCommonJs.js"></script>

    <!--日期相关插件-->
    <script type="text/javascript" src="../basic/My97DatePicker/WdatePicker.js"></script>
   <!--引入日期格式化插件-->
    <script type="text/javascript" src="../basic/js/dateFormat.js"></script>
</head>

<body>
<!--头 -->
<header>
    <article>
        <div class="mt-logo">
            <!--顶部导航条 -->
            <div class="am-container header">
                <ul class="message-l">
                    <div class="topMessage">
                        <div class="menu-hd">
                            <span><a href="../person/index.html">{{customerInfo.customerName}}</a></span>
                            <a href="javascript:logOut()" target="_top">登出</a>
                        </div>
                    </div>
                </ul>
                <ul class="message-r">
                    <div class="topMessage home">
                        <div class="menu-hd"><a href="../home/index.html" target="_top" class="h">商城首页</a></div>
                    </div>
                    <div class="topMessage my-shangcheng">
                        <div class="menu-hd MyShangcheng"><a href="../person/index.html" target="_top"><i
                                class="am-icon-user am-icon-fw"></i>个人中心</a></div>
                    </div>
                    <div class="topMessage mini-cart">
                        <div class="menu-hd"><a id="mc-menu-hd" href="#" target="_top"><i
                                class="am-icon-shopping-cart  am-icon-fw"></i><span>购物车</span><strong id="J_MiniCartNum"
                                                                                                      class="h">0</strong></a>
                        </div>
                    </div>
                    <div class="topMessage favorite">
                        <div class="menu-hd"><a href="#" target="_top"><i
                                class="am-icon-heart am-icon-fw"></i><span>收藏夹</span></a></div>
                    </div>
                </ul>
            </div>

            <!--悬浮搜索框-->

            <div class="nav white">
                <div class="logoBig">
                    <li><img src="../images/logobig.png"/></li>
                </div>

                <div class="search-bar pr">
                    <a name="index_none_header_sysc" href="#"></a>
                    <form>
                        <input id="searchInput" name="index_none_header_sysc" type="text" placeholder="搜索"
                               autocomplete="off">
                        <input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" type="submit">
                    </form>
                </div>
            </div>

            <div class="clear"></div>
        </div>
        </div>
    </article>
</header>
<div class="nav-table">
    <div class="long-title"><span class="all-goods">全部分类</span></div>
    <div class="nav-cont">
        <ul>
            <li class="index"><a href="#">首页</a></li>
            <li class="qc"><a href="#">闪购</a></li>
            <li class="qc"><a href="#">限时抢</a></li>
            <li class="qc"><a href="#">团购</a></li>
            <li class="qc last"><a href="#">大包装</a></li>
        </ul>
        <div class="nav-extra">
            <i class="am-icon-user-secret am-icon-md nav-user"></i><b></b>我的福利
            <i class="am-icon-angle-right" style="padding-left: 10px;"></i>
        </div>
    </div>
</div>
<b class="line"></b>
<div class="center">
    <div class="col-main">
        <div class="main-wrap">
            <div class="am-cf am-padding">
                <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">账单明细</strong> /
                    <small>Electronic&nbsp;bill</small>
                </div>
            </div>
            <hr>
            <div class="finance">
                <div class="financeText">
                    <p>可用余额:<span>¥{{customerInfo.userBalance}}</span></p>
                    <p>账户状态:<span>有效</span></p>
                    <a href="safety.html">安全中心：保护账户资产安全</a>
                </div>
            </div>
            <!--交易时间	-->

            <div class="order-time">
                <label class="form-label">交易时间：</label>
                <div class="show-input">
                    <select  @change="flashLogs(1,5)"  v-model="transactionHour" class="am-selected">
                        <option value="today">今天</option>
                        <option value="sevenDays">最近一周</option>
                        <option value="oneMonth">最近一个月</option>
                        <option value="threeMonths">最近三个月</option>
                        <option class="date-trigger">自定义时间</option>
                    </select>
                </div>
                <div class="clear"></div>
            </div>
            <!--账户余额记录显示-->
            <div class="walletList">


                <div class="walletTitle">
                    <li class="time">创建时间</th>
                    <li class="name">详情</th>
                    <li class="amount">金额</th>
                    <li class="balance">余额</th>
                </div>

                <div class="clear"></div>
                <div class="walletCont">

                    <li v-for="li in iPage.list" v-if="li.source==1" class="cost">
                        <div class="time">
                            <p> {{forMateDate(li.createTime)}}
                            </p>
                            <p class="text-muted"> {{forMateTime(li.createTime)}}
                            </p>
                        </div>
                        <div class="title name">
                            <p class="content">
                                {{li.changeDesc}}
                            </p>
                        </div>

                        <div class="amount">
                            <span class="amount-pay">-{{li.amount}}</span>
                        </div>
                        <div class="balance">
                            <span>余额：</span><em>{{li.frozenMoney}}</em>
                        </div>
                    </li>
                    <li v-else>
                        <div class="time">
                            <p> {{forMateDate(li.createTime)}}
                            </p>
                            <p class="text-muted"> {{forMateTime(li.createTime)}}
                            </p>
                        </div>
                        <div class="title name">
                            <p class="content">
                                {{li.changeDesc}}
                            </p>
                        </div>

                        <div class="amount">
                            <span class="amount-pay">+{{li.amount}}</span>
                        </div>
                        <div class="balance">
                            <span>余额：</span><em>{{li.frozenMoney}}</em>
                        </div>
                    </li>

                </div>

                <!--分页-->
                <ul class="am-pagination am-pagination-right">

                    <li v-if="iPage.hasPreviousPage" @click="flashLogs(iPage.prePage,5)"><a href="#">&laquo;</a></li>
                    <li v-else class="am-disabled"><a href="#">&laquo;</a></li>


                    <li v-for="index in iPage.pages" v-if="index!=iPage.pageNum" @click="flashLogs(index,5)"><a href="#">{{index}}</a></li>
                    <li v-else class="am-active"><a href="#">{{index}}</a></li>


                    <li v-if="iPage.hasNextPage" @click="flashLogs(iPage.nextPage,5)"><a href="#">&raquo;</a></li>
                    <li v-else class="am-disabled"><a href="#">&raquo;</a></li>
                </ul>

            </div>

        </div>
        <!--底部-->
        <div class="footer">
            <div class="footer-hd">
                <p>
                    <a href="#">恒望科技</a>
                    <b>|</b>
                    <a href="#">商城首页</a>
                    <b>|</b>
                    <a href="#">支付宝</a>
                    <b>|</b>
                    <a href="#">物流</a>
                </p>
            </div>
            <div class="footer-bd">
                <p>
                    <a href="#">关于恒望</a>
                    <a href="#">合作伙伴</a>
                    <a href="#">联系我们</a>
                    <a href="#">网站地图</a>
                    <em>© 2015-2025 Hengwang.com 版权所有</em>
                </p>
            </div>
        </div>
    </div>

    <aside class="menu">
        <ul>
            <li class="person active">
                <a href="index.html"><i class="am-icon-user"></i>个人中心</a>
            </li>
            <li class="person">
                <p><i class="am-icon-newspaper-o"></i>个人资料</p>
                <ul>
                    <li><a href="information.html">个人信息</a></li>
                    <li><a href="safety.html">安全设置</a></li>
                    <li><a href="address.html">地址管理</a></li>
                    <li><a href="cardlist.html">快捷支付</a></li>
                </ul>
            </li>
            <li class="person">
                <p><i class="am-icon-balance-scale"></i>我的交易</p>
                <ul>
                    <li><a href="order.html">订单管理</a></li>
                    <li><a href="change.html">退款售后</a></li>
                    <li><a href="comment.html">评价商品</a></li>
                </ul>
            </li>
            <li class="person">
                <p><i class="am-icon-dollar"></i>我的资产</p>
                <ul>
                    <li><a href="points.html">我的积分</a></li>
                    <li><a href="coupon.html">优惠券 </a></li>
                    <li><a href="bonus.html">红包</a></li>
                    <li><a href="walletlist.html">账户余额</a></li>
                    <li><a href="bill.html">账单明细</a></li>
                </ul>
            </li>

            <li class="person">
                <p><i class="am-icon-tags"></i>我的收藏</p>
                <ul>
                    <li><a href="collection.html">收藏</a></li>
                    <li><a href="foot.html">足迹</a></li>
                </ul>
            </li>

            <li class="person">
                <p><i class="am-icon-qq"></i>在线客服</p>
                <ul>
                    <li><a href="consultation.html">商品咨询</a></li>
                    <li><a href="suggest.html">意见反馈</a></li>

                    <li><a href="news.html">我的消息</a></li>
                </ul>
            </li>
        </ul>

    </aside>
</div>

</body>

<script type="text/javascript">
        var userVm = new Vue({
            el: ".main-wrap",
            data: {
                consignees: "",
                customerInfo: "",
                customerLogin: "",
                balancePage:"",
                iPage:"",
                transactionHour:"sevenDays"
            },
            mounted: function () {
                /*
                * 获取用户相关信息
                * */
                axios
                    .get('../customer/isLogin')
                    .then(response => (
                        this.consignees = response.data.data.consignees,
                            this.customerInfo = response.data.data.customerInfo,
                            this.customerLogin = response.data.data.customerLogin)
                    );
                /*
                * 获取账户余额明细表，默认是一周之内
                * */
                axios
                    .get('../customer/getCustomerBalance',
                        {
                            params:{
                                time:this.getTime(),
                                page:"1",
                                pageSize:"5"
                            }
                        })
                    .then(response => (
                        this.iPage = response.data.data)
                    );

            }
            ,methods: {
                getTime:function() {
                    var date=new Date();
                    switch (this.transactionHour) {
                        case "today"://今天
                            break;
                        case "sevenDays"://一周之内
                            date.setDate(date.getDate()-7);
                            break;
                        case "oneMonth"://一个月以内
                            date.setMonth(date.getMonth()-1);
                            break;
                        case "threeMonths"://三个月以内
                            date.setMonth(date.getMonth()-3);
                            break;
                        case "date-trigger":
                            break;
                    }

                    //日期进行格式化
                    return date.format("yyyy-MM-dd");

                },
                flashLogs:function (page,size) {//刷新日志
                    axios
                        .get('../customer/getCustomerBalance',
                            {
                                params:{
                                    time:this.getTime(),
                                    page:page,
                                    pageSize:size
                                }
                            })
                        .then(response => (
                            this.iPage= response.data.data)
                        );
                },
                forMateDate:function (time) {
                    var  date=new Date(time);
                    console.log(time);
                    console.log(date);
                    return date.format("yyyy-MM-dd");
                },
                forMateTime : function(time) {
                    var  date=new Date(time);
                    return date.format("HH:mm");
                }
            }
        });
</script>

</html>